<template>
    <div class="white-box-form">
        <el-form
            ref="ruleRef"
            :model="state.ruleForm"
            :rules="state.rules"
            label-width="120px"
            class="mt-20"
        >
            <el-form-item label="面单模板名称" prop="labelDesignName">
                <el-input
                    v-model.trim="state.ruleForm.labelDesignName"
                    clearable
                    placeholder="请输入面单模板名称"
                />
            </el-form-item>
            <el-form-item label="面单模板类型" prop="labelDesignType">
                <el-select
                    v-model="state.ruleForm.labelDesignType"
                    placeholder="请选择面单模板类型"
                >
                    <el-option
                        v-for="item in state.labelDesignTypeList"
                        :key="item.memberKey"
                        :label="item.memberName"
                        :value="item.memberKey"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="面单模板内容" prop="content">
                <!-- <MyEditor v-model:value="state.ruleForm.content" /> -->
                <div class="flex flex-col">
                    <el-input
                        v-model.trim="state.ruleForm.content"
                        type="textarea"
                        class="!w-600"
                        :autosize="{ minRows: 2, maxRows: 10 }"
                        clearable
                        show-word-limit
                        placeholder="请输入面单模板内容"
                    />
                    <div>
                        <el-button
                            plain
                            type="primary"
                            size="small"
                            @click="
                                state.ruleForm.content = formatContent(
                                    state.ruleForm.content
                                )
                            "
                            >格式化</el-button
                        >
                        <el-button
                            class="ml-5"
                            plain
                            type="primary"
                            size="small"
                            @click="
                                renderContent(
                                    state.ruleForm.content,
                                    renderContentRef
                                )
                            "
                            >预览</el-button
                        >
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="预览">
                <div ref="renderContentRef"></div>
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input
                    v-model.trim="state.ruleForm.note"
                    type="textarea"
                    maxlength="100"
                    :autosize="{ minRows: 2 }"
                    clearable
                    show-word-limit
                    placeholder="请输入备注"
                />
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="state.ruleForm.status">
                    <el-radio
                        v-for="item in state.statusList"
                        :key="item.memberKey"
                        :value="item.memberKey"
                        >{{ item.memberName }}</el-radio
                    >
                </el-radio-group>
                <div class="input-tips">
                    启用当前面单模板会<code>停用其它面单模板</code>
                </div>
            </el-form-item>
        </el-form>

        <div class="foot-btn">
            <el-button
                type="primary"
                :loading="state.form_loading"
                @click="submitForm(ruleRef)"
            >
                {{ isEdit ? "修改" : "添加" }}
            </el-button>
        </div>
        <go-back />
    </div>
</template>

<script setup>
import { inject, ref, onMounted, reactive, h, render } from "vue";
import { useRouter, useRoute } from "vue-router";
import GoBack from "@components/GoBack.vue";
import {
    getLabelTemplateDetail,
    addLabelTemplate,
    editLabelTemplate,
    getLabelTemplateContent as getLabelTemplateContentApi,
} from "@/apis/enterprise/labelTemplate.js";
import MyEditor from "@/components/MyEditor.vue";
import renderVnode from "@/mixins/render-vnode.js";
import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();
dictStore.getDictMembers("data_status").then((res) => (state.statusList = res));
dictStore
    .getDictMembers("label_design_type")
    .then((res) => (state.labelDesignTypeList = res));

const router = useRouter();
const route = useRoute();

const $message = inject("$message");

const sid = route.query.sid;
const isEdit = ref(false);
const form_loading = ref(false);
const ruleRef = ref(null);
const renderContentRef = ref(null);
const state = reactive({
    statusList: [],
    labelDesignTypeList: [],
    ruleForm: {
        content: null,
        labelDesignName: null,
        labelDesignType: null,
        note: null,
        status: 0,
    },
    rules: {
        content: [
            { required: true, message: "请输入面单模板内容", trigger: "blur" },
        ],
        labelDesignType: [
            { required: true, message: "请输入面单模板类型", trigger: "blur" },
        ],
        labelDesignName: [
            { required: true, message: "请输入面单模板名称", trigger: "blur" },
        ],
    },
});

onMounted(async () => {
    if (/Edit$/.test(route.name)) {
        isEdit.value = true;
        await getDetail();
        getLabelTemplateContent();
    }
});

const getDetail = async () => {
    const res = await getLabelTemplateDetail({ sid });
    if (res.data.code == 200) {
        res.data.data.labelDesignType -= 0; // 转为数字
        state.ruleForm = res.data.data;
        state.ruleForm.content = "";
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const getLabelTemplateContent = async () => {
    const res = await getLabelTemplateContentApi({ sid });
    if (res.data.code == 200) {
        state.ruleForm.content = res.data.data.content;
        renderContent(state.ruleForm.content, renderContentRef.value);
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const { formatContent, renderContent } = renderVnode();

// 提交表单
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
        if (valid) {
            form_loading.value = true;
            let res = null;
            state.ruleForm.content = formatContent(state.ruleForm.content);
            if (isEdit.value) {
                res = await editLabelTemplate(state.ruleForm);
            } else {
                res = await addLabelTemplate(state.ruleForm);
            }
            form_loading.value = false;
            if (res.data.code == 200) {
                $message({
                    message: isEdit.value ? "修改成功" : "添加成功",
                    type: "success",
                });
                router.back();
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        }
    });
};
</script>
